<template>



    <view v-for="(item,index) in props.list" class="script-item script-reverse" v-show="isShow(index)">
      <view @click="jump('/pages/play/scriptDetail2?id='+ item.id,true)" class="script-item-box fx-row-b">
        <view class="script-item-box-content fx-col-b">

          <view class="script-item-box-content-author fx-row-s">
            <uv-image
              :width = "width"
              :height = "height"
              shape="circle"
              :src="item.cover"
            ></uv-image>
            <view class="script-item-box-content-author-text ml15"> 作者：{{ item.user?.nickname }}</view>
          </view>

          <view class="script-item-box-content-detail fx-row-b">
            <view class="script-item-box-content-detail-text com-overflow-more">
              {{item.desc}}
            </view>
          </view>


          <view class="script-item-box-content-title fx-row-b">
            <text class="title-name com-overflow">
              {{item.title}}
              <text class="title-name-time"> {{ filterScriptTime(item.timeMin,item.timeMax)[0]?.name }}</text>
            </text>
          </view>

          <view class="script-item-box-content-tag com-overflow fx-row-s">
            <uv-tag v-for="itemTag in item.age" class="mr10" size="mini" mode="light" shape="circle" type="info" :text="itemTag" clear
                    :color="color.colorTextB" :border-color="color.colorTextD"
            />
          </view>

        </view>

        <view class="script-item-box-img main-bg"
              :style="{'background-image': 'url('+ item.cover+')'}"
        >

        </view>
      </view>
    </view>


</template>
<script setup>
import {ref, reactive,computed} from 'vue';
import { ossImage,jump } from '@/utils/index';
import { header,color } from '@/enums/constants';
import {filterScriptTime} from "@/hooks/filterScriptTime.js"
const {width , height} = {...header.little};
const demo = ref('http://t13.baidu.com/it/u=1887934876,2800375899&fm=224&app=112&f=JPEG?w=333&h=500')
const props = defineProps({
  list:{
    type:Array,
    default:[]
  },
  main:{
    type:Boolean,
    default:false
  }
})

const isShow = computed(()=>{
  return (index)=>{
    if(!props.main){return true}
    if(props.main && index<=1){
      return true;
    }else{
      return false;
    }
  }
})

</script>

<style lang="scss" scoped>

</style>
